<template>
  <view class="whe_maxv boxs he_f" style="padding:20rpx 30rpx 10rpx">
    <view>
      <view class="ddisp" style="height: 50px">
        <view @click.stop="addTopShop(1)" class="wz_jz pad_0_10" :class="1 === selectedTabIndex?'wz_lv':''">
          <view class="em">全部</view>
          <view class="fz_14">{{selectApp.h}}%</view>
          <view v-if="selectedTabIndex===1" class="ba_gr mag_t-5 bor_5 wh_8 jz" style="height: 4px"></view>
        </view>
        <view @click.stop="addTopShop(2)" class="wz_jz pad_0_10" :class="2 === selectedTabIndex?'wz_lv':''">
          <view class="em">最新</view>
          <view class="fz_14">{{selectApp.z}}</view>
          <view v-if="selectedTabIndex===2" class="ba_gr mag_t-5 bor_5 wh_8 jz" style="height: 4px"></view>
        </view>
        <view @click.stop="addTopShop(3)" class="wz_jz pad_0_10" :class="3 === selectedTabIndex?'wz_lv':''">
          <view class="em">带图</view>
          <view class="fz_14">{{selectApp.c}}</view>
          <view v-if="selectedTabIndex===3" class="ba_gr mag_t-5-1 bor_5 wh_8 jz" style="height: 4px"></view>
        </view>
      </view>
    </view>
    <view class="flex_1">
      <scroll-view :scroll-y="true" @scrolltolower="scrolltolower"
                   style="height:100%;width: 100%" class="scrollView">
        <view style="padding-bottom: 20px">
          <view v-for="(item,index) in list" :key="index" class="wh_f_r" style="margin-top: 20rpx">
            <view style="padding-right: 30rpx">
              <img class="bor_255" :src="item?.wx_head?item.wx_head:'../../static/img/wdl.png'" style="width: 80rpx;height: 80rpx"/>
            </view>
            <view>
              <view class="wh_f_l pad_5_0">
                <view>
                  <view class="wh_f_l">
                    <view class="fz_18">
                      <text style="color: #383838">{{ item?.real_name }}</text>
                    </view>
                    <view>
                      <view v-if="item.rating == 1">
                        <img class="centerdq" src="../img/hp.png" style="width: 20px;height: 20px"/>
                        <text class="centerdq mag_l-5" style="color: #ffc92b">好评</text>
                      </view>
                      <view v-if="item.rating == 5">
                        <img class="centerdq" src="../img/cp.png" style="width: 20px;height: 20px"/>
                        <text class="centerdq mag_l-5" style="color: #ffc92b">差评</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="czjz_flex" style="padding-left: 30rpx;color: #636363">{{ item.created_at.split(' ')[0] }}</view>
              </view>
              <view class="ccsl_2 mag_t-5" style="color: #636363">
                <text v-if="item.comment">{{ item.comment }}</text>
                <text v-else>暂无评价内容</text>
              </view>
              <view class="mag_t-10 ddisp">
                <view v-for="(items,indexs) in item.images" :class="index === 2?'':'pad_r_pl'" class="boxs" style="width:33%;"  :key="indexs">
                  <view class="img_zfx">
                     <img :src="items" />
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="list.length<1" class="jz_flex" style="height: 60%">
            <view class="wz_jz">
              <image style="width: 200px;height: 130px" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/08/xcx_1751945016_KEXbwbZngN.png"></image>
              <view class="mag_t-20">暂无更多评论!</view>
            </view>
          </view>
          <!--      底部加载提示-->
          <view v-if="jzisTrue === 1" style="height: 30px"></view>
          <view v-if="jzisTrue === 2" class="wz_jz">
            <view style="height: 26px">
              <text class="centerdq">
                <text class="fz_14" style="margin-right: 10px">加载中</text>
              </text>
              <view class="disp centerdq">
                <view class="jzjdt"></view>
              </view>
            </view>
          </view>
          <view v-if="jzisTrue === 3" class="wz_jz">
            <view style="height: 26px">
              <text class="centerdq">
                <text class="fz_14">没有更多商品了</text>
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import {getGoodsReviews, getReviewsCount, orderDetail} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      shopAppTitleList:[
        {
          id:1,
          name:"全部",
          value:"98.9好评",
        },
        {
          id:2,
          name:"最新",
          value:"249",
        },
        {
          id:3,
          name:"带图",
          value:"3",
        }
      ],
      selectedTabIndex:1,
      list:[],
      selectApp:{},
      page:1,
      jzisTrue:1,
    }
  },
  onLoad(options){
    this.order_id = options.id
    getGoodsReviews({
      goods_id:options.id,
      page:1
    }).then(res=>{
      this.list = res.data.data
    })
    getReviewsCount({goods_id:options.id}).then(res=>{
      console.log('好评率',res)
      this.selectApp = res.data
    })
  },
  methods:{
    // 分页
    scrolltolower(){
      // 如果 jzisTrue = 3 没有更多数据了
      if(this.jzisTrue === 3){

      }else{
        if(this.page === 1){
          this.page += 1
        }
        this.jzisTrue = 2
        // 触底了
        setTimeout(()=>{
          this.jzisTrue = 1
          this.getList()
        },2000)
      }
    },
    addTopShop(i){
      this.page = 1
      this.selectedTabIndex = i
      this.getList(i)
    },
    getList(e){
      getGoodsReviews({
        goods_id:this.order_id,
        page:this.page,
        type:e
      }).then(res=>{
        // 如果没有数据 说明已经没有更多数据了 改变底部加载状态为3
        if(res.data.data.length<1){
          this.jzisTrue = 3
        }else{
          this.page += 1
          //有数据 正常合并新的数据
          this.list = this.list.concat(res.data.data); // 或者使用:
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.jzjdt {
  border: 3px solid hsla(185, 100%, 62%, 0.2);
  border-top-color: #3a9e5f;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.wz_lv{
  color: #3a9e5f!important;
}
.pad_r_pl{
  padding-right: 10rpx;
}
</style>
